<h1><i class="icon-hand-up"></i> Buttons</h1>


<hr />

<h3>Markup</h3>

<pre>&lt;a class="btn" href=""&gt;Link&lt;/a&gt;
	
&lt;button class="btn" type="submit"&gt;Button&lt;/button&gt;

&lt;input class="btn" type="button" value="Input"&gt;

&lt;input class="btn" type="submit" value="Submit"&gt;
</pre>

<hr />



<h3>Semantic Buttons</h3>

<table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Button</th>
        <th style="width: 160px">class=""</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><button class="btn" href="#">Default</button></td>
        <td><code>btn</code></td>
        <td>Standard gray button with gradient</td>
      </tr>
      <tr>
        <td><button class="btn btn-primary" href="#">Primary</button></td>
        <td><code>btn btn-primary</code></td>
        <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
      </tr>
      <tr>
        <td><button class="btn btn-secondary" href="#">Secondary</button></td>
        <td><code>btn btn-secondary</code></td>
        <td>Provides extra visual weight and identifies the secondary action in a set of buttons</td>
      </tr>
      <tr>
        <td><button class="btn btn-tertiary" href="#">Tertiary</button></td>
        <td><code>btn btn-tertiary</code></td>
        <td>Provides extra visual weight and identifies the tertiary action in a set of buttons</td>
      </tr>
      <tr>
        <td><button class="btn btn-info" href="#">Info</button></td>
        <td><code>btn btn-info</code></td>
        <td>Used as an alternative to the default styles</td>
      </tr>
      <tr>
        <td><button class="btn btn-success" href="#">Success</button></td>
        <td><code>btn btn-success</code></td>
        <td>Indicates a successful or positive action</td>
      </tr>
      <tr>
        <td><button class="btn btn-warning" href="#">Warning</button></td>
        <td><code>btn btn-warning</code></td>
        <td>Indicates caution should be taken with this action</td>
      </tr>
      <tr>
        <td><button class="btn btn-danger" href="#">Danger</button></td>
        <td><code>btn btn-danger</code></td>
        <td>Indicates a dangerous or potentially negative action</td>
      </tr>
      <tr>
        <td><button class="btn btn-inverse" href="#">Inverse</button></td>
        <td><code>btn btn-inverse</code></td>
        <td>Alternate dark gray button, not tied to a semantic action or use</td>
      </tr>
    </tbody>
  </table>
  
  
<hr />

<h3>Button Sizes</h3>

<ul class="list-class">
	
	<li><code>.btn-large</code></li>
	<li><code>.btn</code></li>
	<li><code>.btn-small</code></li>
	<li><code>.btn-mini</code></li>
	
</ul>

<hr />

<h3>Disabled State</h3>

<p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.</p>



<hr />


<h3>Dropdown Markup</h3>

<pre>&lt;div class="btn-group"&gt;
  &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
    Action
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;!-- dropdown menu links --&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>


<hr />

<h3>Split Button Markup</h3>

<pre>&lt;div class="btn-group"&gt;
  &lt;button class="btn"&gt;Action&lt;/button&gt;
  &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;!-- dropdown menu links --&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>